<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple React Flow</title>
    <style>
        html, body, #root {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <!-- 引入 React 和 ReactDOM -->
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入 Babel 用于编译 JSX -->
    <script src="https://cdn.jsdelivr.net/npm/babel-standalone@6/babel.min.js"></script>
    <!-- 引入 React Flow -->
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-flow-renderer@11.11.4/dist/umd/index.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        // 确保 React 和 ReactDOM 已加载
        if (window.React && window.ReactDOM) {
            const { createRoot } = window.ReactDOM;
            const { ReactFlow, addEdge, removeElements, Controls, Background, MiniMap } = window.ReactFlow;

            const rootElement = document.getElementById('root');
            const root = createRoot(rootElement);

            // 初始化节点
            const initialNodes = [
                { id: 'node-1', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, type: 'default' },
                { id: 'node-2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, type: 'default' },
            ];

            // 初始化边
            const initialEdges = [
                { id: 'edge-1', source: 'node-1', target: 'node-2' },
            ];

            // 处理节点变化
            function applyNodeChanges(changes, nodes) {
                return changes.reduce((acc, change) => {
                    if (change.type === 'add') {
                        acc.push(change.node);
                    } else if (change.type === 'remove') {
                        acc = acc.filter(node => node.id !== change.id);
                    } else if (change.type === 'update') {
                        acc = acc.map(node => (node.id === change.id ? { ...node, ...change.data } : node));
                    }
                    return acc;
                }, nodes);
            }

            // 处理边变化
            function applyEdgeChanges(changes, edges) {
                return changes.reduce((acc, change) => {
                    if (change.type === 'add') {
                        acc.push(change.edge);
                    } else if (change.type === 'remove') {
                        acc = acc.filter(edge => edge.id !== change.id);
                    } else if (change.type === 'update') {
                        acc = acc.map(edge => (edge.id === change.id ? { ...edge, ...change.data } : edge));
                    }
                    return acc;
                }, edges);
            }

            // React 组件
            const App = () => {
                const [nodes, setNodes] = React.useState(initialNodes);
                const [edges, setEdges] = React.useState(initialEdges);

                const onNodesChange = (changes) => setNodes((nds) => applyNodeChanges(changes, nds));
                const onEdgesChange = (changes) => setEdges((eds) => applyEdgeChanges(changes, eds));
                const onConnect = (connection) => setEdges((eds) => addEdge(connection, eds));

                return (
                    <ReactFlow
                        nodes={nodes}
                        edges={edges}
                        onNodesChange={onNodesChange}
                        onEdgesChange={onEdgesChange}
                        onConnect={onConnect}
                        fitView
                    >
                        <Controls />
                        <MiniMap />
                        <Background variant="dots" gap={12} size={1} />
                    </ReactFlow>
                );
            };

            // 渲染应用
            root.render(<App />);
        } else {
            console.error('React or ReactDOM is not loaded.');
        }
    </script>
</body>
</html>